<template>
	<view class="one">
		<view class="bg-white padding">
			<view class="cu-steps">
				<view class="cu-item" :class="index > num ? '' : 'text-blue'" v-for="(item, index) in numList"
					:key="index">
					<text class="num" :data-index="index + 1"></text> {{ item.name }}
				</view>
			</view>
		</view>

		<view class="padding-sm" v-if="showApprovalBox">
			<view class="position">
				<view class="title"><span></span>修改意见</view>
				<view class="">
					<textarea v-model="approvalContent"></textarea>
				</view>
			</view>

		</view>

		<view class="BH5"></view>
		<view class="padding-sm">
			<view class="position">
				<view class="title"><span>*</span>商家名称</view>
				<view class="padding-top-xs">

					<!-- 					<input placeholder="请输入商家名称" name="input"></input> -->

					<input placeholder="请输入商家名称" v-model="ShopName" />
				</view>
			</view>

		</view>
		<view class="BH5"></view>
		<view class="bian ">
			<view class="title"><span>*</span>身份证<text class="text-gray">（请上传经营者身份证照片）</text></view>
			<view class="shangc">
				<view class="sc-l" @click="chooseImage('IDCardFront')">
					<view class="sc-l-img">
						<img :src="IDCardFront || require('@/imgs/shen.png')" alt="身份证正面"></img>
					</view><br />
					身份证正面
				</view>
				<view class="sc-l" @click="chooseImage('IDCardReverse')">
					<view class="sc-l-img">
						<img :src="IDCardReverse || require('@/imgs/shen.png')" alt="身份证反面"></img>
					</view><br />
					身份证反面
				</view>
			</view>
		</view>
		<view class="bian ">
			<view class="title"><span>*</span>营业执照<text class="text-gray">（请上传最新中国大陆营业执照正面照）</text></view>
			<view class="yyzz" @click="chooseImage('BusinessLicense')">
				<img :src="BusinessLicense || require('@/imgs/shen.png')" alt="营业执照"></img>
			</view>
		</view>
		<view class="H50"></view>
		<view class="btn flex flex-direction">
			<button class="cu-btn lg bg-blue" @click="next">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numList: [{
					name: '提交资质'
				}, {
					name: '选择入驻方式'
				}, {
					name: '等待审核'
				}, ],
				num: 0,
				ShopId: "1", // 示例 ShopId，实际可能从其他地方获取
				ShopName: "",
				IDCardFront: "", // 身份证正面图片路径
				IDCardReverse: "", // 身份证反面图片路径
				BusinessLicense: "", // 营业执照图片路径
				showApprovalBox: false, // 是否显示审批内容框
				approvalContent: '', // 审批意见
			};
		},
		methods: {
			async checkAndRedirect() {
				this.$api.shops_manage.FindUserShopData().then((res) => {
					if (res != null && res.data != null) {
						if (res.data.auditState === 'Approval') {
							// 跳转到 show.vue 页面
							uni.redirectTo({
								url: "/pages/certification/three/three", // 替换为实际路径
							});
						} else if (res.data.auditState === 'Pass') {
							// 跳转到 show.vue 页面
							uni.redirectTo({
								url: "/pages/certification/show/show", // 替换为实际路径
							});
						} else if (res.data.auditState === 'Reject') {
							this.showApprovalBox = true;
							this.approvalContent = res.data.auditRemark;
						}
					}
				});
			},
			// 选择图片
			chooseImage(type) {
				uni.chooseImage({
					count: 1, // 允许选择一张图片
					sourceType: ["album", "camera"], // 可以从相册或相机选择
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]; // 获取图片路径
						this[type] = tempFilePath; // 更新对应的图片路径
					},
					fail: (err) => {
						console.error("选择图片失败:", err);
						uni.showToast({
							title: "选择图片失败，请重试",
							icon: "none",
						});
					},
				});
			},
			async next() {
				//next

				try {
					// 检查是否选择了所有图片
					if (!this.IDCardFront || !this.IDCardReverse || !this.BusinessLicense) {
						uni.showToast({
							title: "请上传所有图片",
							icon: "none",
						});
						return;
					}

					if (!this.ShopName) {
						uni.showToast({
							title: "请输入店铺名称",
							icon: "none",
						});
						return;
					}

					// 显示加载提示
					uni.showLoading({
						title: "正在上传...",
					});

					// 构造 FormData
					// const formData = new FormData();
					// formData.append("ShopId", 1234); // 文本字段
					//formData.append("IDCardFront", this.createFileFromPath(this.IDCardFront)); // 文件字段
					// formData.append("IDCardReverse", this.createFileFromPath(this.IDCardReverse)); // 文件字段
					// formData.append("BusinessLicense", this.createFileFromPath(this.BusinessLicense)); // 文件字段

					// 遍历并打印 FormData 内容
					// for (let [key, value] of formData.entries()) {
					// 	console.log(key, value);
					// }
					// 构造表单数据
					// const formData = {
					// 	ShopId: this.ShopId, // 文本字段
					// };

					// // 分别上传每张图片
					// await this.uploadFile(formData, "IDCardFront", this.IDCardFront);


					// // 上传身份证正面
					// await this.uploadFile(formData, "IDCardFront", this.IDCardFront);

					// // 上传身份证反面
					// await this.uploadFile(formData, "IDCardReverse", this.IDCardReverse);

					// // 上传营业执照
					// await this.uploadFile(formData, "BusinessLicense", this.BusinessLicense);

					// 隐藏加载提示
					uni.hideLoading();

					// 提示上传成功
					// uni.showToast({
					// 	title: "上传成功",
					// 	icon: "success",
					// });

					// 跳转到下一步页面
					// uni.navigateTo({
					// 	url: '/pages/certification/two/two',
					// });
					uni.navigateTo({
						url: `/pages/certification/two/two?ShopName=${this.ShopName}&IDCardFront=${encodeURIComponent(this.IDCardFront)}&IDCardReverse=${encodeURIComponent(this.IDCardReverse)}&BusinessLicense=${encodeURIComponent(this.BusinessLicense)}`,
					});
				} catch (error) {
					uni.hideLoading();
					console.error("上传资质失败:", error);
					uni.showToast({
						title: "上传失败，请重试",
						icon: "none",
					});
				}
			},

			// 单个文件上传方法
			async uploadFile(formData, fieldName, filePath) {
				this.$api.shops_manage
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.$api.baseUrl() + "/api/baseshop/ApplyShopQualifications", // 后端接口地址
						filePath: filePath, // 文件路径
						name: fieldName, // 表单字段名
						formData: formData, // 其他表单字段
						success: (res) => {
							if (res.statusCode === 200) {
								resolve(res);
							} else {
								reject(new Error("上传失败"));
							}
						},
						fail: (err) => {
							reject(err);
						},
					});
				});
			},

		},
		onLoad() {
			this.checkAndRedirect();
		}
	}
</script>

<style lang="scss">
	.one {
		.BH5 {
			background-color: #F3F5F4;
			height: 4px;
		}

		.title {
			padding: 5px 0 15px;
			font-weight: 600;

			span {
				color: #E74949;
				padding-right: 5px;
			}
		}

		.position {
			display: flex;
			justify-content: space-between;
			padding: 5px 0 0;

			input {
				text-align: right;
			}
		}

		.bian {
			border-bottom: 1px solid #F7F7F7;
			padding: 10px 10px 20px;
		}

		.shangc {
			display: flex;
			justify-content: space-between;

			.sc-l {
				width: 48%;
				text-align: center;
				color: #A1A1A1;

				.sc-l-img {
					background-color: #F7F7F7;
					padding: 10px 0;

					img {
						width: 140px;
						height: 85px;
					}
				}
			}
		}

		.yyzz {
			background-color: #F7F7F7;
			padding: 15px;
			text-align: center;

			img {
				width: 160px;
				height: 100px;
			}
		}

		.H50 {
			height: 50px;
		}

		.btn {
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 10px;
			width: 100%;
			background-color: #fff;
			z-index: 9;
		}
	}
</style>